@import "./colors";

@mixin linear-gradient($startPosition, $startColor, $endColor) {
  background-color: $startColor;

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient($startPosition, $startColor, $endColor);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient($startPosition, $startColor, $endColor);

  /* IE 10 */
  background: -ms-linear-gradient($startPosition, $startColor, $endColor);

  /* Opera 11.10+ */
  background: -o-linear-gradient($startPosition, $startColor, $endColor);
}

%userselectnone {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
%clearfix {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

%placeholder {
  display: block;
  text-align: center;
  margin: 2rem;
  font-size: 2rem;
  color: $darkerGrayBlueColor;
}

%alert {
  padding: 0.25em 0.75em;
  border: 0.1em solid darken($almostWhiteColor, 6%);
  border-radius: 0.25em;
  font-weight: 400;
}

%btn {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 400;
  line-height: 1em;
  padding: 0.75em 1em;
  text-decoration: none;
  background-color: $almostWhiteColor;
  color: $blackColor;
  border: 0;

  &[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

%btn-green {
  @extend %btn;
  background-color: $greenColor;
  color: $almostWhiteColor;
}

%btn-red {
  @extend %btn-green;
  background-color: $redColor;
}

%btn-block {
  margin-top: 1rem;
  width: 100%;
  font-size: 1.7rem;
  font-weight: 600;
  padding: 1.15em 1em;
  text-align: center;
}

